<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子组件</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <div>这是内容区域</div>
        <my-footer></my-footer>
    </div>


    <!---父组件-->
    <template id="footer">
        <div>
            <div>您点击了  {{clickName}}   组件</div>
            <footer-item @danji="clickChange" :n123="item.title" :src="item.imgUrl" v-for="(item, index) in items" :key="index"></footer-item>        
        </div>
    </template>

    <!--子组件-->
    <template id="footerItem">
        <div>
           
            <a @click="clickDiv()">{{n123}}  </a>
            <img :src="src"/>
            <span>图片地址：{{src}}</span>
        </div>
    </template>
</body>
<script>
    //  定义子组件
    var footerItem = {
        template: "#footerItem",
        data() {
            return {
                // name:"首页"
            }
        },
        props:["n123","src"],
        methods: {
            clickDiv(){
                this.$emit("danji",this.n123);
                // alert("您点击了"+this.n123+"子组件");
            }
        },
    }
    //   定义父组件
    var footer = {
        template: "#footer",
        data(){
            return {
                items:[
                    {title:"首页",imgUrl:"../images/13366704144928317.png"},
                    {title:"购物车"},
                    {title:"我的"},
                ],
                clickName:"",
            }
        },
        components: {
            "FooterItem": footerItem
        },
        methods:{
            clickChange(value){
                this.clickName=value;
            }
        }
    }


    new Vue({
        el: "#app",
        components: {
            "MyFooter": footer
        }
    });
</script>

</html>